

// 轮播图构造函数  
function Carousel(ulElement, arrowLeft, arrowRight) {  
  this.ulElement = ulElement;  
  this.arrowLeft = arrowLeft;  
  this.arrowRight = arrowRight;  
  this.list = Array.from(ulElement.children);  
  this.dots = Array.from(document.getElementsByClassName('dot-box')[0].children);  
  this.index = 0;  
  this.lastIndex = 0;  
    
  // 初始化激活状态  
  this.initActive();  
    
  // 绑定事件  
  this.bindEvents();  
}  
  
// 设置激活状态  
Carousel.prototype.initActive = function() {  
  this.list[0].classList.add('li-active');  
  this.dots[0].classList.add('dot-active');  
};  
  
// 绑定事件  
Carousel.prototype.bindEvents = function() {  
  // 绑定箭头点击事件  
  this.arrowLeft.addEventListener('click', this.arrowLeftFn.bind(this));  
  this.arrowRight.addEventListener('click', this.arrowRightFn.bind(this));  
    
  // 绑定小圆点点击事件  
  var dots = document.getElementsByClassName('dot-box')[0].children;  
  for (var i = 0; i < dots.length; i++) {  
    dots[i].addEventListener('click', this.dotClickFn.bind(this, i));  
  }  
};  
  
// 箭头点击事件 - 下一张  
Carousel.prototype.arrowLeftFn = function() {  
  console.log('下一张');  
  this.index--;  
  if (this.index < 0) {  
    this.index = this.list.length - 1;  
  }  
  this.changeActive();  
};  
  
// 箭头点击事件 - 上一张  
Carousel.prototype.arrowRightFn = function() {  
  console.log('上一张');  
  this.index++;  
  if (this.index >= this.list.length) {  
    this.index = 0;  
  }  
  this.changeActive();  
};  
  
// 小圆点点击事件  
Carousel.prototype.dotClickFn = function(elIndex) {  
  console.log('小圆点点击');  
  this.index = elIndex;  
  console.log(this.list); 
  this.changeActive();  
};  
  
// 修改激活状态函数 - 主要功能是修改激活类名和相应的小圆点类名  
Carousel.prototype.changeActive = function() {  
  // 移除上一张li的激活类名和小圆点的激活类名 (当前激活对象更换了)  
  this.list[this.lastIndex].classList.remove('li-active');  
  this.dots[this.lastIndex].classList.remove('dot-active');  
  this.list[this.index].classList.add('li-active');  
    this.dots[this.index].classList.add('dot-active');  
    this.lastIndex = this.index;

}
    
  // 添加当前激活对象的类名和小圆点的类名激活状态到对应的元素上，更新激活索引值 lastIndex。